/* common */

//Inherits from the original project, delete it sooner or later
body
{
    background: #f1f1f1 ;
    font-size: .80em;
    font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

//start by Houkanshan
@page-width: 960px;
@box-margin: 12px;

.box-wrapper {
    overflow: hidden;
    background: white;
    *zoom: 1;
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

//.grid12 {
    //width: @page-width + @box-margin;
    //margin-left: - @box-margin;
//}

//.grid10 {
    //width: @page-width * 10 / 12 - @box-margin;
    //margin-left: @box-margin;
//}
//.grid2{
    //width: @page-width * 2 /12 - @box-margin;
    //margin-left: @box-margin;
//}
.test-bg {
    background: rgba(0, 0, 0, .25);
}



//main framwork 
.wrapper {
    .box-wrapper;
    //.grid12;
    width: @page-width - 2 * @box-margin;
    margin: 0 auto;
    padding: @box-margin;
}
.header {
    //.grid2;
    width: @page-width * 2 /12 - @box-margin;
    .box-wrapper;
    .pull-right;
    //margin-top: @box-margin;
}
.main {
    //.grid10;
    width: @page-width * 10 / 12 - 2 * @box-margin;
    .pull-left;
    //margin-top: @box-margin;
}
//main framework end


//header
.nav-item {
    .box-wrapper;
    .test-bg;
    margin-bottom: @box-margin;
    width: 100%;
    height: 100px;
    a {
        display: block;
        height: 100%;
        width: 100%;
    }
}
//header end

//main
.main {
    .silverlight {
        .test-bg;
        width: 100%;
        height: 450px;
        margin-bottom: @box-margin;
    }
    .profile-list {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }

}
.profile-list {
    .section-wrapper {
        width: 2000px;
        height: 100%;
        font-size: 0px;
    }
}
.section-wrapper {
    .section {
        .box-wrapper;
        .test-bg;
        margin-right: @box-margin;
        font-size: 14px;
        display: inline-block; //fix inline margin
        height: 100%;
        width: 220px;
        a {
            display: block;
            height: 100%;
            width: 100%;
        }
    }
    .transition(margin .5s);
}
//main end
